<template>
    <div class="course-table-container">
        <!-- 表单 -->
        <el-form inline>
            <el-form-item label="学生名称" style="width: 20%;">
                <el-input v-model="params.nickName" placeholder="请输入要搜索学生名称" />
            </el-form-item>
            <el-form-item label="学校名称" style="width: 20%;">
                <el-input v-model="params.schoolName" placeholder="请输入要搜索学校名称" />
            </el-form-item>
            <el-form-item>
                <el-button @click="onSearch" plain>搜索</el-button>
                <el-button @click="onReset" plain type="info">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table height="526px" :data="studentList">
            <el-table-column align="center" prop="studentId" label="学生id" />
            <el-table-column align="center" prop="classroomName" label="班级" />
            <el-table-column align="center" prop="nickName" label="名称" />
            <el-table-column align="center" prop="schoolName" label="学校" />
            <el-table-column align="center" prop="createTime" label="注册时间" />
            <el-table-column label="操作" width="200px" fixed="right">
                <template #default="{ row }">
                    <el-button type="text" @click="onEdit(row.studentId)">编辑
                    </el-button>
                    <el-button type="text" class="red" @click="onDelete(row.studentId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
            v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 20, 50]"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <student-drawer ref="studentEditRef" @success="onSuccess"></student-drawer>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, provide } from 'vue';
import { getStudentListService, delStudentService } from '@/apis/student'
import StudentDrawer from "@/components/drawer/StudentDrawer.vue"

const classroomId = ref('');
const props = defineProps({
    classroomId: {
        type: String,
        required: true
    }
});
onMounted(() => {
    classroomId.value = props.classroomId;
    getStudentList()
});

const params = reactive({
    pageNum: 1,
    pageSize: 10,
    nickName: '',
    classroomId: '',
    schoolName: ''
})

const studentEditRef = ref()
const studentList = ref([])
const total = ref(0)

async function getStudentList() {
    params.classroomId = classroomId.value
    console.log('params', params)
    const ref = await getStudentListService(params)
    studentList.value = ref.rows
    total.value = ref.total
}

function onSearch() {
    params.pageNum = 1
    getStudentList()
}

function onReset() {
    params.pageNum = 1
    params.pageSize = 10
    params.nickName = ''
    params.classroomId = ''
    params.schoolName = ''
    getStudentList()
}

function handleSizeChange(newSize) {
    params.pageNum = 1
    getStudentList()
}

function handleCurrentChange(newPage) {
    getStudentList()
}

function onSuccess(service) {
    if (service === 'add') {
        params.pageNum = 1
    }
    getStudentList()
}

async function onDelete(studentId) {
    const isConfirmed = window.confirm("确定要删除该学生吗？");
    if (isConfirmed) {
        // 用户点击确认
        await delStudentService(studentId);
        params.pageNum = 1;
        getStudentList();
    } else {
        // 用户点击取消
        console.log("删除操作已取消");
    }
}
async function onEdit(studentId) {
    studentEditRef.value.open(studentId)
}
</script>

<style scoped>
/* 整体容器样式 */
.course-table-container {
    background-color: #e7f1ff;
    /* 浅蓝色背景 */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    /* 白色表格背景 */
    border: 1px solid #d3e0ea;
    /* 浅蓝色边框 */
}
</style>